<template>
  <div>
    <div>
      <h2 class="head">社区团购管理系统</h2>
      <div class="head" v-if="flag">
        <el-button type="info" plain @click="dialogVisible = true">管理员登录</el-button>
      </div>
      <div class="head" v-if="!flag">
        <el-button type="info" plain @click="logout()">退出</el-button>
      </div>
      <el-divider><i class="el-icon-loading"></i></el-divider>
    </div>
    <el-carousel :interval="4000" type="card" height="400px">
      <el-carousel-item v-for="item in img" :key="item">
        <el-image
          style="width: 100%; height: 100%"
          :src="item"
          initial-index="0"
          autoplay
          interval="500">
        </el-image>
      </el-carousel-item>
    </el-carousel>
    <!--登录对话框-->
    <el-dialog
      title="管理员请登录"
      :visible.sync="dialogVisible"
      width="30%"
      :before-close="handleClose">
      <!--嵌套一个表单-->
      <el-form ref="form" :model="user" label-width="80px">
        <el-form-item label="账号">
          <el-input v-model="user.username" placeholder="请输入账号"></el-input>
        </el-form-item>
        <el-form-item label="密码">
          <el-input type="password" v-model="user.password" placeholder="请输入密码"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
    <el-button @click="dialogVisible = false" type="warning" plain>取 消</el-button>
    <el-button type="success" @click="login()" plain>确 定</el-button>
  </span>
    </el-dialog>
  </div>
</template>

<script>
import img1 from "../../assets/img/1.jpg";
import img2 from "../../assets/img/2.jpg";
import img3 from "../../assets/img/3.jpg";
import img4 from "../../assets/img/4.jpg";

export default {
  name: "AppIndex",
  data() {
    return {
      img: [img1, img2, img3, img4],
      dialogVisible: false,
      user: {
        username: '',
        password: '',
      },
      flag:sessionStorage.getItem('token')==null,
    }
  },
  methods: {
    handleClose(done) {
      this.$confirm('确认关闭？')
        .then(_ => {
          done();
        })
        .catch(_ => {
        });
    },
    //点击登录
    login() {
      this.dialogVisible = false; //隐藏对话框
      // this.axios.post('http://localhost:8081/admin/login', {
      //   username:this.user.username,
      //   password:this.user.password,
      // }).then(function (res) {
      //     console.log(res.data.result);
      //   })
      //   .catch(function (error) {
      //     console.log(error);
      //   });
      this.axios.post('http://localhost:8081/admin/login', this.user)
      .then( (res)=> {
        if(res.data.result){
          sessionStorage.setItem("token",this.user.username);
          this.flag=false;
          this.$message({
            message: '登录成功',
            type: 'success'
          });
        }else {
          sessionStorage.removeItem('token')
          this.$message({
            message: '登录失败，请检查账号或者密码填写是否正确！',
            type: 'warning'
          });
        }
      })
        .catch(function (error) {
          console.log(error);
        });
    },
    logout(){
      sessionStorage.removeItem('token')  //清空
      this.flag=true;
    }
  }
}
</script>

<style>
.head {
  text-align: center;
}
</style>
